<template>
  <div
    class="p-5 rounded-md"
    :style="{
      border: '1px solid var(--border-primary)',
      backgroundColor: 'var(--bg-primary)',
    }"
  >
    <!-- 标签导航 -->
    <div class="tabs-nav p-1 rounded-md">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        :class="[
          'tab-item p-1 rounded-md',
          { active: activeTab.name === tab.name },
        ]"
        @click="handleClick(tab)"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- 内容区域 -->
    <div>
      <EChartsComponent :option="activeTab.option" class="w-full" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import EChartsComponent from "../eChartsComponent.vue";


// 接收外部传入的标签列表
const props = defineProps({
  tabs: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const activeTab = ref(props.tabs[0]);

// 处理点击事件
const handleClick = (tabValue) => {
  activeTab.value = tabValue;
};
</script>

<style lang="scss" scoped>
.tabs-nav {
  background-color: var(--bg-search);
  display: inline-block;

  .tab-item {
    width: 100px;
  }
  .active {
    background-color: var(--bg-primary);
  }
}
</style>
